<template>
  <div class="page">
    <div class="page-breadcrumb">
      <el-breadcrumb class="strong" separator="/">
        <el-breadcrumb-item :to="{ path: '/assessMonth/list' }">考核列表</el-breadcrumb-item>
        <el-breadcrumb-item>XX项目评分详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具条-->
    <v-pageToolbar align='left'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <h4>加分项详情</h4>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <v-pageTable>
        <el-table v-loading="tableData1.loading" :data="tableData1.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column v-for="(item,index) in tableData1.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
            </el-table-column>
        </el-table>
    </v-pageTable>
    <!--工具条-->
    <v-pageToolbar align='left'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <h4>减分项详情</h4>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <v-pageTable>
        <el-table v-loading="tableData1.loading" :data="tableData2.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column v-for="(item,index) in tableData2.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
            </el-table-column>
        </el-table>
    </v-pageTable>
    <v-pageBack align='right'>
    </v-pageBack>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData1: {
            loading: true,
            head: [],
            body: []
        },
        tableData2: {
            loading: true,
            head: [],
            body: []
        },
        paginationTotal: 100,
        sels:[]
      }
    },
    methods: {
      getTableData(data) {
          // ajax 查询表格数据
          this.tableData1.head = [
              {
                  key: 'detail',
                  name: '加分详情'
              },
              {
                  key: 'score',
                  name: '分数'
              },
              {
                  key: 'name',
                  name: '评分人'
              }
          ]
          this.tableData1.body = [
            {
              detail: 'XXXXXXXXXXX',
              score: '75',
              name: '曾建清'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '95',
              name: '陈光明'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '75',
              name: '曾建清'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '90',
              name: '郑山'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '80',
              name: '吴先锋'
            }
          ]
          this.tableData2.head = [
              {
                  key: 'detail',
                  name: '加分详情'
              },
              {
                  key: 'score',
                  name: '分数'
              },
              {
                  key: 'name',
                  name: '评分人'
              }
          ]
          this.tableData2.body = [
            {
              detail: 'XXXXXXXXXXX',
              score: '60',
              name: '曾建清'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '50',
              name: '陈光明'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '55',
              name: '曾建清'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '45',
              name: '郑山'
            }, {
              detail: 'XXXXXXXXXXX',
              score: '30',
              name: '吴先锋'
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData1.loading = false
          }, 1000)
      },
      selsChange: function (sels) {
				this.sels = sels;
			},
      handleClick(row) {
        console.log(row);
      },
      batchClick(){
        // var ids = this.sels.map(item => item.id).toString();
				console.log(this.sels)
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
    }
  }
</script>